<template>
  <div id="app">
    <!-- nihao  -->
    <!-- <router-view /> -->
    <div class="player" id="plyaer" ref="player"></div>
  </div>
</template>
<script>
	const { createAgoraRtcEngine, VideoMirrorModeType, VideoSourceType, RenderModeType, ChannelProfileType, ClientRoleType} = require("agora-electron-sdk");
	import path from 'path';
	import os from 'os';
	export default {
		data() {
			return {
				rtcEngine:'',
				isJoined:false,
				channelToken:'007eJxTYPhvfyBiRl+dypOLE5Wz/q1k38Do1D1J6st31X3OTqdWvPukwJBsYZGaampgaZZiYmlimmacaGmSmJpibJhskmSZZphosn/XneSGQEaGeazWzIwMEAjiczAYGhmDEQMDAHExIYU=',
				channel:'12312312',
				appid:'c88ee5096d4945f3a94aed31c4b9f1a4',
				
			}
		},
		mounted(){
			const _this = this;
			_this.rtcEngine = createAgoraRtcEngine();
			_this.rtcEngine.initialize({
				appId: _this.appid,
				logConfig: { filePath: path.resolve(os.homedir(), "./test.log")}
			});
			// 注册事件回调
			_this.rtcEngine.registerEventHandler({
				//监听本地用户加入频道事件
				onJoinChannelSuccess:({ channelId, localUid }, elapsed) => {
					console.log('成功加入频道：' + channelId);
					_this.isJoined = true;
					//本地用户加入后设置本地视频窗口
					_this.rtcEngine.setupLocalVideo({
						sourceType: VideoSourceType.VideoSourceCameraPrimary,
						view: _this.$refs.player,
						mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
						renderMode: RenderModeType.RenderModeFit,
					})
				},
				onLeaveChannel:({ channelId, localUid }, stats) => {
					console.log('成功退出频道：' + channelId);
					_this.isJoined = false;
				},
				onUserJoined:({ channelId, localUid }, remoteUid, elapsed) => {
					console.log('远端用户 ' + remoteUid + ' 已加入');
					// 远端用户加入频道后，设置远端视频窗口
					// _this.rtcEngine.setupRemoteVideoEx({
					// 	sourceType: VideoSourceType.VideoSourceRemote,
					// 	uid: remoteUid,
					// 	view: ,
					// 	mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
					// 	renderMode: RenderModeType.RenderModeFit,
					// },{channelId})
				}
			});
			// 设置频道场景为直播场景
			_this.rtcEngine.setChannelProfile(ChannelProfileType.ChannelProfileLiveBroadcasting);
		
			// 设置用户角色，主播设为 ClientRoleBroadcaster，观众设为 ClientRoleAudience
			_this.rtcEngine.setClientRole(ClientRoleType.ClientRoleBroadcaster);
			_this.rtcEngine.enableVideo()
			_this.rtcEngine.startPreview();
			
			_this.rtcEngine.joinChannel(_this.channelToken, _this.channel, 12, {});
		},
		created() {
			const _this = this;
		  
		},
		methods:{

		}
	}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .player{
    width: 400px;
    height: 400px;
    border: 1px solid #42b983;
  }
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
